<template>
    <div class="keywords-page">
        <div class="AboutUs">
            <el-menu class="essay-menu" default-active="50" @select="getIndex">
                <el-menu-item class="essay-menu-item" index="50" @click="showData(50)">主页</el-menu-item>
                <el-menu-item class="essay-menu-item" index="48" @click="showData(48)">人才</el-menu-item>
                <el-menu-item class="essay-menu-item" index="49" @click="showData(49)">企业</el-menu-item>
            </el-menu>
            <div class="content">
                <h2 class="p-margin-bottom">{{title}}</h2>
                <el-form label-width="150px" label-position="right"  style="width:550px;">
                    <el-form-item label="域名：">
                        <el-input v-model="domain" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="网站标题：">
                        <el-input v-model="keys.title"></el-input>
                    </el-form-item>
                    <el-form-item label="关键字：">
                        <el-input v-model="keys.keywords"></el-input>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-input type="textarea"  :rows="3" :maxlength="90" show-word-limit v-model="keys.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" class="btn ML" type="primary" @click="save(activeIndex)">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        name: "keywords",
        data(){
            return {
                activeIndex:50,
                keys:{},
                id:-1,
                values:[],
                title:"主页",
                domain:"www.gcs360.com"
            }
        },
        methods:{
            getIndex(index) {
                this.activeIndex = index;
                if(index == 50){
                    this.id = this.values[2].id;
                }else if(index == 48){
                    this.id = this.values[0].id;
                }else if(index == 49){
                    this.id = this.values[1].id;
                }
                console.log("index",this.activeIndex);
            },
            showData(v){
                if(v==48){
                    this.title = "人才"
                    this.domain = "talent.gcs360.com";
                    this.keys = JSON.parse(this.values[0].content)
                }else if(v==49){
                    this.title = "企业"
                    this.domain = "company.gcs360.com";
                    this.keys = JSON.parse(this.values[1].content)
                }else if(v==50){
                    this.title = "首页"
                    this.domain = "www.gcs360.com";
                    this.keys = JSON.parse(this.values[2].content)
                }
            },
            save(op){
                let url = this.id == -1?'/platform/addStaticData.do':'/platform/updateStaticData.do'
                let json = JSON.stringify(this.keys);
                this.lAxios({
                    method: 'post',
                    url:url,
                    params:{
                        id:this.id,
                        content:json,
                        typeId:op,
                        num:1,
                    },
                }).then(res=>{
                    res = res.data;
                    if(res.status == 0){
                        this.$message.success('操作成功!');
                        if(res.data.typeId==50){
                            this.values[2].content = res.data.content;
                            this.keys = JSON.parse(this.values[2].content)
                        }else if(res.data.typeId==48){
                            this.values[0].content = res.data.content;
                            this.keys = JSON.parse(this.values[0].content)
                        }else if(res.data.typeId==49){
                            this.values[1].content = res.data.content;
                            this.keys = JSON.parse(this.values[1].content)
                        }
                    }else {
                        this.$message.error('操作失败!');
                    }
                })
            }
        },
        created() {
            this.lAxios({
                method: 'post',
                url:'/platform/selectStaticData.do',
                params:{
                    state:'48,49,50',
                }
            }).then(res=>{
                if(res.data.status == 0){
                    this.values[0] = res.data.data["48"][0];
                    this.values[1] = res.data.data["49"][0];
                    this.values[2] = res.data.data["50"][0];
                    if(this.activeIndex==50){
                        if(this.values[2].content != undefined)
                            this.keys = JSON.parse(this.values[2].content)
                        this.id = this.values[2] != undefined?this.values[2].id:-1;
                    }else if(this.activeIndex==48){
                        if(this.values[0].content != undefined)
                            this.keys = JSON.parse(this.values[0].content)
                        this.id = this.values[0] != undefined?this.values[0].id:-1;
                    }else if(this.activeIndex==49) {
                        if (this.values[1].content != undefined)
                            this.keys = JSON.parse(this.values[1].content)
                        this.id = this.values[1] != undefined?this.values[1].id:-1;
                    }
                }else{

                }
            })
        }
    }
</script>

<style lang="scss" >
    .keywords-page{
        padding: 60px 0;
        .AboutUs {
            display: flex;
            justify-content: space-between;
            .essay-menu {
                width: 203px;
                border-right: none;
                margin-right: 60px;
                .essay-menu-item {
                    text-align: right;
                    /*border-right: 3px solid #e6e6e6;*/
                }
                .el-menu-item.is-active {
                    /*border-right: 3px solid #409eff;*/
                }
            }
            .content{
                width: 100%;
                padding-top: 16px;
            }
        }
        .el-textarea .el-textarea__inner{
            resize: none;
        }
        .p-margin-bottom{
            margin-bottom: 40px
        }
    }
</style>